<template>
  <div class="form-layout">
    <!--左侧导航-->
    <div class="nav-left">
      <customAnchor
        :itemList="[
          { name: 'box-base', title: '基础信息' },
          { name: 'box-show', title: '显示配置' },
          { name: 'box-handel', title: '处理配置' },
          { name: 'box-dynamic', title: '动态报表配置' },
          { name: 'box-source', title: '数据源配置' },
          { name: 'box-cache', title: '缓存表配置' },
          { name: 'box-table', title: '表格字段配置' },
          { name: 'box-chat', title: '图表字段配置' }
        ]"
      />
    </div>

    <!--表单区域-->
    <div class="form-right" ref="formRight">
      <customForm :data="form" :rules="propRules" ref="editForm" :disabled="propReadonly">
        <template #content>
          <div id="box-base" class="box-title">基础信息</div>
          <customFormItem label="报表标识" name="code" :parent="_self" :form="form" />
          <customFormItem label="报表名称" name="name" :parent="_self" :form="form" />
          <customFormItem label="子标题" name="subtitle" :parent="_self" :form="form" />
          <customFormItem label="备注" name="remarks" :parent="_self" :form="form"  :type="constCommon.formItemType.textarea.name" fullWidth/>

          <div id="box-show" class="box-title">显示配置</div>
          <customFormItem label="图表" name="flagShowChart" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"
                          :config="{flagValueBoolean: false}"
                          help="是否显示为图表"
          />
          <customFormItem
            label="报表类型"
            name="type"
            :parent="_self"
            :form="form"
            :type="constCommon.formItemType.radio.name"
            :config="{options: propDictionaries.type, defaultValue: ''}"
          />
          <customFormItem label="分页" name="flagPaging" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"
                          :config="{flagValueBoolean: false}"
                          help="列表查询是否分页"
          />
          <customFormItem label="列表" name="flagShowGrid" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"
                          :config="{flagValueBoolean: false}"
                          help="是否显示列表"
          />
          <customFormItem label="看板" name="flagBoard" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"
                          :config="{flagValueBoolean: false}"
                          help="是否是看板"
          />
          <customFormItem label="复选框" name="flagCheckbox" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"
                          :config="{flagValueBoolean: false}"
                          help="是否显示列表左侧复选框"
          />
          <customFormItem label="不打印序号列" name="noPrintSeq" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"
                          :config="{flagValueBoolean: false}"
                          help="是否打印时不打印序号列"
          />
          <customFormItem label="不显示顶部合计" name="flagTopSum" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"
                          :config="{flagValueBoolean: false}"
                          help="是否不显顶部的合计区域"
          />
          <customFormItem label="不显示底部合计" name="flagBottomSum" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"
                          :config="{flagValueBoolean: false}"
                          help="是否不显底部的合计区域"
          />

          <div id="box-handel" class="box-title">处理配置</div>
          <customFormItem label="前置处理方法" name="preFun" :parent="_self" :form="form"
                          help="统一使用后台BeforeReport.java类，数据查询前处理sql，此处只需要指定方法名即可，比如:preInOrderItem"
          />
          <customFormItem label="后置点击方法" name="afterFun" :parent="_self" :form="form"
                          help="统一使用前台 reportAfterFuns.js类，响应单元格点击事件，此处只需要指定方法名即可，比如:preInOrderItem"
          />
          <customFormItem label="样式处理方法" name="getClassFun" :parent="_self" :form="form"
                          help="统一使用前台 reportClassFuns.js,用于返回单元格样式，此处只需要指定方法名即可，比如:stockExpNotice"
          />
          <customFormItem label="扩展按钮获取" name="getBtnFun" :parent="_self" :form="form"
                          help="统一使用前台 reportGetBtnFuns.js类,用于返回操作区域扩展按钮，此处只需要指定方法名即可，比如:settlementSumSp"
          />
          <customFormItem label="扩展按钮点击" name="afterBtnFun" :parent="_self" :form="form"
                          help="统一使用前台 reportAfterBtnFuns.js类,用于响应扩展按钮点击事件，此处只需要指定方法名即可，比如:settlementSumSp"
          />
          <customFormItem label="底部签名" name="footSign" :parent="_self" :form="form"   :type="constCommon.formItemType.textarea.name" fullWidth
                          help="打印及导出底部签名，数组类型，如：[ {name: '1', text: '制表日期', col: 8}, {name: '2', text: '制表人', col: 8}, {name: '3', text: '复核人', col: 8}, ]"
          />

          <div id="box-dynamic" class="box-title">动态报表配置</div>
          <customFormItem label="动态字段" name="flagDynamicColumn" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"
                          :config="{flagValueBoolean: false}"
          />
          <customFormItem label="动态合计列" name="flagColumnSum" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"
                          :config="{flagValueBoolean: false}"
          />
          <customFormItem label="隐藏空列" name="flagHideNull" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"
                          :config="{flagValueBoolean: false}"
          />
          <customFormItem label="不显示右侧合计" name="flagRightSum" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"
                          :config="{flagValueBoolean: false}"
          />
          <customFormItem label="数据处理方法" name="preFunColumnSql" :parent="_self" :form="form" />
          <customFormItem label="列sql" name="columnSql" :parent="_self" :form="form"   :type="constCommon.formItemType.textarea.name" fullWidth :config="{maxlength: 100000, maxRows: 30}"/>
          <customFormItem label="二级表头sql" name="columnSql2" :parent="_self" :form="form" :type="constCommon.formItemType.textarea.name" fullWidth :config="{maxlength: 100000, maxRows: 30}"/>

          <div id="box-source" class="box-title">数据源配置</div>
          <customFormItem label="查询sql" name="dataSql" :parent="_self" :form="form"  :type="constCommon.formItemType.textarea.name" fullWidth :config="{maxlength: 100000, maxRows: 30}"/>

          <div id="box-cache" class="box-title">缓存表配置</div>
          <customFormItem label="缓存表数据源" name="tmptableSql" :parent="_self" :form="form"  :type="constCommon.formItemType.textarea.name" fullWidth :config="{maxlength: 100000, maxRows: 30}"/>
          <customFormItem label="清空按钮" name="flagTmptableClear" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"
                          :config="{flagValueBoolean: false}"
          />
          <customFormItem label="定期刷新数据" name="flagCheckData" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"
                          :config="{flagValueBoolean: false}"
          />
          <customFormItem label="打印时间" name="flagPrint" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"
                          :config="{flagValueBoolean: false}"
          />
          <customFormItem label="缓存表" name="flagTmptable" :parent="_self" :form="form"
                          :type="constCommon.formItemType.switch.name"
                          :config="{flagValueBoolean: false}"
          />
          <customFormItem label="主键索引" name="tmptableFieldPks" :parent="_self" :form="form" />
          <customFormItem label="唯一索引" name="tmptableFieldUnqs" :parent="_self" :form="form" />
          <customFormItem label="普通索引" name="tmptableFieldIndexs" :parent="_self" :form="form" />
          <customFormItem label="增量字段" name="tmptableFieldMax" :parent="_self" :form="form" />

          <div id="box-table" class="box-title">表格字段配置</div>
          <data-view ref="gridFieldDataView" propViewKey="report_grid_field"
                     :propInitData="form"  :propParentPage="_self"
                     propViewForm="report/grid-field/detail.vue"
                     :propAutoFetchData="false"
                     :propDisabledActiveNext="true"
                     :propBeforeClick="propBeforeClickGridField"
                     :propIsTdesign="true"
                     :propNoEditRow="true"
                     @extra-button-click="handleExtraButtonClick" />

          <div id="box-chat" class="box-title">图表字段配置</div>
          <data-view
          ref="chartFieldDataView"
            propViewKey="report_chart_field"
            :propInitData="form"
            :propParentPage="_self"
            :propDisabledActiveNext="true"
           :propIsTdesign="true"
           :propNoEditRow="true"
            propViewForm="report/chart-field/detail.vue"
            :propAutoFetchData="false"
          />
        </template>
      </customForm>
    </div>
  </div>
</template>
<script>
import customAnchor from '@/components/custom/form/customAnchor.vue'


// require styles
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/blackboard.css'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/sql-hint.js'
import 'codemirror/addon/lint/json-lint.js'
import 'codemirror/addon/selection/active-line.js'
import 'codemirror/mode/sql/sql'

import Report from '@/components/report/Report'

export default {
  data() {
    return {
      form: {
        types: ['grid'],   // 图表类型
      },
      viewData: {},
    }
  },
  methods: {
    getChildViewQueryWrapper() {
      if (this.form.id) {
        return this.$newWrapper().eq('reportId', this.form.id)
      } else {
        return this.$newWrapper().ne('1', 1)
      }
    },
    handleExtraButtonClick(extra) {
      let {button: {key}} = extra
      if (key == 'oneKey') { //一键生成
        this.utilMessage.confirm('将根据[查询sql]返回字段添加表格字段，是否确认?', () => {
          this.utilVue.loadShow(true)
          this.$ajax.post('/report/config/autoGridFields', this.form).then(resp => {
            this.utilVue.loadHide()
            let wrapper = this.getChildViewQueryWrapper()
            this.$refs.gridFieldDataView.setQueryWrapper(wrapper)
          })
        })
      }
    },

    // 列字段点击
    propBeforeClickGridField(button, formData , rowData, that) {
      // 行编辑按钮
      if (button.key == 'vrb-edit') {
        this.$refs.gridFieldDataView.openViewForm(rowData)
        return false;
      }
      // 列表添加按钮
      if (button.key == 'vb-add') {
        this.$refs.gridFieldDataView.openViewForm(null)
        return false;
      }
      console.log('button', button)
      return true;
    }
  },
  created() {
    let that = this
    this.$emit('event-register', {
      validate: (callback) => {
        return this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        this.$emit('data-callback', this.form)
        if (this.form.flagBoard && this.form.rollCycle && Number(this.form.rollCycle) < 10) {
          this.utilMessage.error('翻页周期不可小于10秒')
          return
        }
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)
        this.$set(this.form, 'types', this.form.types || ['grid'])

        this.$set(this.form, 'source', 'SQL')
        this.$set(this.form, 'flagPaging', this.form.flagPaging == undefined ? false : this.form.flagPaging)
        this.$set(this.form, 'flagShowChart', this.form.flagShowChart == undefined ? false : this.form.flagShowChart)
        this.$set(this.form, 'flagShowGrid', this.form.flagShowGrid == undefined ? false : this.form.flagShowGrid)
        this.$set(this.form, 'flagShowSummary', this.form.flagShowSummary == undefined ? false : this.form.flagShowSummary)
        this.$set(this.form, 'flagBoard', this.form.flagBoard == undefined ? false : this.form.flagBoard)

        this.$nextTick(() => {
          let wrapper = this.getChildViewQueryWrapper()
          let {gridFieldDataView, chartFieldDataView} = this.$refs
          gridFieldDataView.setQueryWrapper(wrapper)
          chartFieldDataView.setQueryWrapper(wrapper)

          let {previewReport} = this.$refs
          if (previewReport) {
            previewReport.fetchData()
          }
        })
      },
      afterSave: () => {

      },
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {
      },
      beforeFlow: (flowButtonKey) => {
        return true
      },
      afterFlow: (flowButtonKey) => {
      },
      beforeClose: () => {
        return true
      },
      afterClick(button, data, viewForm) {
        let {key: buttonKey} = button
        if (buttonKey == 'vfb-copy') { //复制
          that.$prompt('请输入新的报表标识（不可重复）', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /.+/,
            inputErrorMessage: '视图标识不能为空'
          }).then(({ value }) => {
            that.utilVue.loadShow(true)
            that.$ajax.get(`/report/config/copy?id=${data.id}&codeNew=${value}`).then(resp => {
              that.utilVue.loadHide()
              if (resp.code == 0) {
                that.propParent.ocRefresh()
                that.$confirm('报表复制成功，是否打开进行编辑?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'success'
                }).then(() => {
                  that.propParent.viewRow(resp.data.id)
                }).catch(() => {
                })
              }
            })
          }).catch(() => {
          })
        }
      }
    })
  },
  props: ['propPrimaryKey', 'propDictionaries', 'propCurrentRow', 'propViewFormData', 'propReadonly', 'propStatus', 'propRules', 'propInitData', 'propParent', 'customAnchor'],
  components: {
    Report,
    customAnchor
  },
}
</script>
<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
    .box-title {
      margin-top: 0;
    }
  }
  .wrapper {
    display: flex;
    padding-left: 20px;;
  }
</style>
